<script setup>
import { ElMessage, ElMessageBox } from "element-plus";

const close = () => {
  ElMessageBox.confirm("确定退出此系统吗", "退出系统", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "退出成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消退出",
      });
    });
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部栏 -->
      <el-header
        ><div class="logo"></div>
        <div class="dengta">灯塔之城游戏后台</div>

        <el-popconfirm
          confirm-button-text="Yes"
          cancel-button-text="No"
          icon-color="#626AEF"
          title="消息提示"
        >
          <template #reference>
            <i class="iconfont icon-tongzhi"></i>
          </template>
        </el-popconfirm>
        <!-- 气泡弹出框 -->
        <el-popover
          placement="top-start"
          title="用户信息"
          :width="200"
          trigger="hover"
          content="角色权限：超级管理员  
          角色名称：季秋
          "
        >
          <template #reference>
            <!-- 用户头像 -->
            <i class="iconfont icon-touxiang"> </i>
          </template>
        </el-popover>
        <div class="username">陈启迪</div>
        <el-icon class="shezhi"><Guide /></el-icon>
        <i class="iconfont icon-tuichu" @click="close"></i>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->

        <el-aside
          ><el-col>
            <br />
            <el-menu
              active-text-color="#ffd04b"
              background-color="rgb(84, 86, 82)"
              default-active="2"
              text-color="#fff"
              class="el-menu-vertical-demo"
              :router="true"
            >
              <!-- 设置 -->
              <el-menu-item class="home-page" index="/homePage">
                <el-icon><icon-menu /></el-icon>
                <span>首页</span>
              </el-menu-item>
              <el-sub-menu>
                <template #title>
                  <span
                    ><el-icon><FolderOpened /></el-icon>设置</span
                  >
                </template>
                <el-menu-item-group title="玩家管理">
                  <el-menu-item index="/manage/petManage"
                    >宠物管理</el-menu-item
                  >
                  <el-menu-item index="/manage/propertyManage"
                    >道具管理</el-menu-item
                  >
                  <el-menu-item index="/manage/outfitManage"
                    >装扮管理</el-menu-item
                  >
                </el-menu-item-group>
                <el-menu-item-group title="游戏管理">
                  <el-menu-item index="/manage/bossManage"
                    >BOSS管理</el-menu-item
                  >
                  <el-menu-item index="/manage/refreshPoint"
                    >刷新点管理</el-menu-item
                  >
                </el-menu-item-group>
              </el-sub-menu>

              <!-- 运营 -->
              <el-sub-menu index="2">
                <template #title>
                  <el-icon><DataLine /></el-icon>
                  <span>运营</span>
                </template>
                <el-menu-item-group title="玩家相关">
                  <el-menu-item index="/operate/playerManage"
                    >玩家管理</el-menu-item
                  >
                  <el-menu-item index="2-2">活动点管理</el-menu-item>
                  <el-menu-item index="2-3">消息管理</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <!-- 数据 -->
              <el-sub-menu index="/data/growthAnalysis">
                <template #title>
                  <el-icon><Star /></el-icon>
                  <span>数据</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/data/growthAnalysis"
                    >增长分析</el-menu-item
                  >
                  <el-menu-item index="/data/gameAnalysis"
                    >游戏分析</el-menu-item
                  >
                </el-menu-item-group>
              </el-sub-menu>
              <!-- 系统 -->
              <el-sub-menu index="4">
                <template #title>
                  <el-icon><Setting /></el-icon>
                  <span>系统</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/system/userManagement"
                    >用户管理</el-menu-item
                  >
                  <el-menu-item index="/system/systemManagement"
                    >系统管理</el-menu-item
                  >
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-col></el-aside
        >
        <el-main> <router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style  scoped>
@import "@/assets/iconfont/iconfont.css";
@import url("@/css/common.css");
.el-header {
  height: 60px;
  align-items: center; /* 垂直居中 */
  background-color: rgb(84, 86, 82);
}
.home-page {
  height: 30px;
}

.logo {
  width: 60px;
  height: 60px;
  float: left;
  margin-left: 20px;
  background: url("@/assets/logo.png") no-repeat center/ 60px;
}
.dengta {
  height: 60px;
  float: left;
  line-height: 60px;
  margin-left: 40px;
  align-items: center;
  font-size: 35px;
  color: white;
}
.icon-tongzhi {
  float: left;
  margin-left: 20px;
  height: 60px;
  line-height: 60px;
  font-size: 28px;
  color: aliceblue;
  margin-left: 320px;
}
.icon-touxiang {
  float: left;
  height: 60px;
  line-height: 60px;
  font-size: 28px;
  color: aliceblue;
  margin-left: 80px;
}
.username {
  float: left;
  width: 60px;
  margin-left: 12px;
  line-height: 60px;
  color: aliceblue;
  font-size: 12px;
}
.shezhi,
.icon-tuichu {
  float: left;
  height: 60px;
  line-height: 60px;
  font-size: 28px;
  color: aliceblue;
  margin-left: 80px;
}

.el-menu-item.is-active,
.el-menu-item:focus,
.el-menu-item:active {
  background-color: rgb(44, 182, 156);
}
.el-menu-item:visited,
.el-menu-item:hover {
  background-color: #57c3c2;
}
.el-aside {
  width: 150px;
  padding: 0;
}
</style>
